<template>
  <div class="app-form-list-wrapper">
    <div class="side">
      <div class="bar-button" v-context="addButtonContext">
        <el-button type="primary" size="small" :icon="Plus" circle/>
      </div>

      <FListV2 :selectedKey="selectedFormKey" title-name="showName" :dataSource="formList" @select="selectForm">
        <template v-slot:default="{item}">
          <div class="form-list-item">
            <div style="flex: 1">{{ item.showName }}</div>
            <div class="config-button" v-context="[formItemContext, item]"
                 @click="(e) => showItemContext(e, item)">
              <el-button size="small" :icon="Setting" circle/>
            </div>
          </div>
        </template>

      </FListV2>
    </div>
    <div class="content" v-loading="loading">
      <div class="preview" :style="previewStyle" v-html="previewForm.viewDesignDefinition">
      </div>
    </div>

    <FormRelation ref="FormRelation"/>
  </div>
</template>

<script>
import FList from '@/components/FList';
import {Plus, Setting} from '@element-plus/icons-vue';
import {deleteAction, getAction} from '@/request/BaseRequest';
import {real, stopPropagation} from '@/utils/CommonUtils';
import {DefaultViewDefinition} from '@/components/form/DefaultFormDefinition';
import {ElMessageBox} from 'element-plus';
import {markRaw} from 'vue';
import FListV2 from '@/components/FListV2/index.vue';
import FormRelation from '@/components/app/FormRelation/index.vue';

export default {
  name: "AppFormList",
  components: {
    FormRelation,
    FListV2,
    FList,
  },
  data() {
    return {
      Plus: markRaw(Plus),
      Setting: markRaw(Setting),
      loading: false,
      addButtonContext: {
        context: [
          {title: '新建流程表单', id: 'addFlowForm'},
          {title: '新建无流程表单', id: 'addCommonForm'},
        ],
        click: this.addButtonContextClick,
        close: () => null,
      },
      selectedFormKey: undefined,
      previewForm: JSON.parse(JSON.stringify(DefaultViewDefinition)),
      formItemContext: {
        width: 120,
        context: [
          {title: '编辑', id: 'edit', icon: 'edit'},
          {title: '上移', id: 'moveUp', icon: 'up'},
          {title: '下移', id: 'moveDown', icon: 'down'},
          {title: '删除', id: 'delete', icon: 'remove'},
          {title: '业务关联', id: 'relation', icon: 'relation'},
        ],
        click: this.formItemContextClick,
        close: () => null,
      },
      formList: []
    };
  },
  mounted() {
    this.loadFormList();
  },
  methods: {
    formItemContextClick(item, data) {
      if (item.id === 'edit') {
        this.editForm(item);
        this.formItemContext.close();
      }
      if (item.id === 'delete') {
        this.formItemContext.close();
        ElMessageBox.confirm('删除后不可恢复, 确定删除吗', '确定删除?', {
          draggable: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.removeForm()
        }).catch(() => {
        });
      }
      if (item.id === 'relation') {
        data = real(data);
        this.$refs.FormRelation.setData(data.formName);
        this.formItemContext.close();
      }
    },
    removeForm() {
      this.loading = true
      deleteAction('/plat/platForm/removeFormById', {id: this.selectingItem.id}).then(data => {
        if (data.success) {
          this.clearPreview();
          this.loadFormList();
        } else {
          this.$notification.error({message: data.message, result: data.result,duration: 3})
        }
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
        this.$notification.error({message: error, duration: 3})
      })
    },
    editForm(form) {
      let url = `/form/edit?fullScreen=1&formId=${this.selectingItem.id}`;
      this.$windowManager.open(url, {
        title: this.selectingItem.showName,
        close: () => {
          this.clearPreview();
          this.loadFormList();
        }
      });
    },
    clearPreview() {
      this.previewForm = JSON.parse(JSON.stringify(DefaultViewDefinition));
      this.selectedFormKey = undefined;
    },
    addButtonContextClick(item) {
      if (item.id === 'addFlowForm') {
        this.addButtonContext.close();
        let url = `/form/add?fullScreen=1&appId=${this.$route.query.appId}&processForm=1`;
        this.$windowManager.open(url, {
          title: '新建流程表单',
          close: () => {
            this.clearPreview();
            this.loadFormList();
          }
        });
      }
      if (item.id === 'addCommonForm') {
        this.addButtonContext.close();
        let url = `/form/add?fullScreen=1&appId=${this.$route.query.appId}&processForm=0`;
        this.$windowManager.open(url, {
          title: '新建流程表单',
          close: () => {
            this.clearPreview();
            this.loadFormList();
          }
        });
      }
    },
    active() {
    },
    showItemContext(e, item) {
      stopPropagation(e);
      this.selectingItem = item;
    },
    loadFormList() {
      let appId = this.$route.query.appId;
      this.loading = true;
      getAction('/plat/platForm/query', {appId: appId}).then(data => {
        if (data.success) {
          this.formList = data.result;
        } else {
          this.$notification.error({message: data.message, result: data.result, duration: 3});
        }
        this.loading = false;
      })
    },
    selectForm(form) {
      this.selectedFormKey = form.id
      this.loading = true;
      getAction('/plat/platFormView/query', {formId: form.id, main: 1}).then(data => {
        if (data.success) {
          data = data.result;
          if (data.length >= 1) {
            this.previewForm.viewDesignDefinition = data[0].viewDesignDefinition;
          } else {
            this.previewForm.viewDesignDefinition = '';
          }
        } else {
          this.$notification.error({message: data.message, result: data.result, duration: 3});
        }
        this.loading = false;
      })
    },
  },
  computed: {
    previewStyle() {
      return {
        width: `${this.previewForm.viewDesignDefinition.width}px`
      };
    },
  }
};
</script>

<style>
.app-form-list-wrapper {
  height: calc(100vh - 40px);
  display: flex;
}

.app-form-list-wrapper .content {
  flex: 1;
  overflow: auto;
}

.app-form-list-wrapper .side {
  height: calc(100vh - 40px);
  overflow: visible;
  width: 260px;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.app-form-list-wrapper .bar-button {
  position: absolute;
  top: 8px;
  right: -14px;
  z-index: 10;
  height: 25px;
  width: 25px;
}

.app-form-list-wrapper .form-list-item {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

.app-form-list-wrapper .config-button {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-form-list-wrapper .content {
  display: flex;
  justify-content: center;
  background: #595959;
}

.app-form-list-wrapper .preview {
  margin: 20px 10px;
  background: white;
  height: fit-content;
}
</style>
